<template>
    <div class="user" style="padding: 0px;">
        <el-card>
            <el-button @click="addClick" icon="Plus" plain>新增</el-button>
            <el-table size="small" :data="tableData" v-loading="loading" border style="width: 100%;margin-top:5px;" stripe>
                <el-table-column prop="areaId" label="城市标识" width="80" align="center"></el-table-column>
                <el-table-column prop="areaName" label="城市名称"></el-table-column>
                <el-table-column label="操作" width="190" align="center">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row, 1)" icon="Edit">编辑</el-button>
                        <el-button type="text" size="small" @click="handleClick(scope.row, 2)" icon="Delete" style="color:red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
   </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import SalesApi from '@/api/sales'
import { useCascaderAreaData } from '@/utils/area'
import { defaultPageSize } from '@/utils/table.js'
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            tableData: [

            ],
            totalDataNumber: 100,
            searchForm: {
                pageIndex: 1,
                pageSize: defaultPageSize,
                keyword: '',
            },
            loading: false,
            defaultData: useCascaderAreaData()

        };
    },
    computed: {},
    watch: {},
    methods: {
        loadData() {
            const $this = this
            $this.loading = true
            SalesApi.getData($this.searchForm, true)
                .then(result => {
                    const { code, data } = result
                    $this.loading = false
                    if (code === 1) {
                        $this.tableData = data.records
                        // $this.tableData = []
                        // data.records.forEach(item => {

                        //     const provice = $this.defaultData.find(f => f.value === item.province)
                        //     const areaValues = []
                        //     if (provice) {
                        //         areaValues.push(provice.label)
                        //         if (provice.children && provice.children.length > 0) {
                        //             const city = provice.children.find(f => f.value === item.city)
                        //             if (city) {
                        //                 areaValues.push(city.label)
                        //                 if (city.children && city.children.length > 0) {
                        //                     const dis = city.children.find(f => f.value === item.district)
                        //                     if (dis) {
                        //                         areaValues.push(dis.label)
                        //                     }
                        //                 }
                        //             }


                        //         }
                        //     }
                        //     const json = {
                        //         ...item,
                        //         areaName: areaValues.join('/')
                        //     }

                        //     $this.tableData.push(json)

                        // })
                        $this.totalDataNumber = data.total
                    }
                }).catch(error => {
                    $this.loading = false
                })

        },
        onSearch() {
            this.loadData()
        },
        handleClick(row, type) {

            if (type === 1) {
                //编辑
                this.$router.push({
                    path: '/saleeMan/AddJurisdiction',
                    query: {
                        id: row.areaId,
                        areaName: row.areaName,
                        areaCode: row.areaCode,
                        value: `${row.province}/${row.city}/${row.district}`
                    }
                })
            } else {
                //删除
                const $this = this
                ElMessageBox.confirm(
                    '您确定要删除此业务员数据?',
                    '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    SalesApi.deleteArea(row.areaId, true)
                        .then(result => {
                            const { code, msg } = result
                            if (code === 1) {
                                ElMessage({
                                    type: 'success',
                                    message: msg
                                })
                                $this.loadData()
                            }
                        })


                })
            }
        },
        addClick() {
            this.$router.push({
                path: '/saleeMan/AddJurisdiction'
            })
        },
        handleCurrentChange(current) {
            this.searchForm.pageIndex = current
            this.loadData()
        },
        handleSizeChange(size) {
            this.searchForm.pageSize = size
        }
    },
    created() {
        this.loadData()
    },
    mounted() {

    },
}
</script>
<style scoped></style>